<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <table class="table">
          <tr>
            <td>
              <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8" @submit.prevent="page(1)">
                <div class="form-group">
                  <label class="font-noraml">创建时间</label>
                  <div class="input-daterange input-group">
                    <input autocomplete="off" type="text" placeholder="点击输入起始时间" class="input-sm form-control" name="dateBegin"/>
                    <span class="input-group-addon">到</span>
                    <input autocomplete="off" type="text" placeholder="点击输入截止时间" class="input-sm form-control" name="dateEnd"/>
                  </div>
                </div>
                <div class="form-group">
                  <input type="text" name="keyword" placeholder="请输入关键词" class="input-sm form-control">
                </div>
                <div class="form-group">
                  <button type="submit" class="btn btn-sm btn-primary">搜索</button>
                  <button type="reset" class="btn btn-sm btn-dafault">重置</button>
                </div>
              </form>
            </td>
          </tr>
        </table>
        <a href="javascript:;" @click="edit('a',{id:0});" v-if='staff.hasPermission("riverSupervisor:add")' class="btn btn-xs btn-success"><i class="fa fa-edit"></i> 新增/添加</a>
        <div class="table-responsive table-scrollable">
          <table class="table table-bordered table-striped  table-hover">
            <thead>
            <tr>
              <th style="width:20px;">#</th>
              <th>河长类型</th>
              <th>河长名称</th>
              <th>河长级别</th>
              <th>河长单位</th>
              <th>河长职务</th>
              <th>河长电话</th>
              <th>管理河道</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="result.data.data && result.data.data.length>0" v-for="(item, index) in result.data.data">
              <td>{{ (result.data.pageIndex - 1) * result.data.pageSize + index + 1 }}</td>
              <td v-html="typeEnum(item.type)"></td>
              <td>{{ item.name }}</td>
              <td>{{ item.level }}</td>
              <td>{{ item.unitName }}</td>
              <td>{{ item.job }}</td>
              <td>{{ item.cellphone }}</td>
              <td>
                <div style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;max-width: 150px;">
                  {{ item.riverName || '--' }}
                </div>
              </td>
              <td>
                <a href="javascript:;" v-show='staff.hasPermission("riverSupervisor:info")' @click="info('i',item)"
                   rel="nofollow" class="label label-info"><i class="fa fa-bookmark"></i> 详情</a>
                <a href="javascript:;" v-show='staff.hasPermission("riverSupervisor:edit")' @click="edit('e',item)"
                   class="label label-success"><i class="fa fa-edit"></i> 编辑</a>
                <a href="javascript:;" v-show='staff.hasPermission("riverSupervisor:del")' @click="del(item)"
                   rel="nofollow" class="label label-danger"><i class="fa fa-trash-o"></i> 删除</a>
              </td>
            </tr>
            <tr v-if="result.data.data==null || result.data.data.length==0">
              <td colspan="9">
                <div class="alert"><strong>{{ result | message }}</strong></div>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="b_page" v-html="tagPages"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/datepicker-vendor.js'
import {$storage, axiosContentType, site} from '@/assets/js/boss'
import '@/assets/js/pageTag'

export default {
  data() {
    return {
      result: {data: {pageIndex: 1, data: []}, message: ''},
      tagPages: ''
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    this.staff.init(function () {
        that.page(1);
      });
      $('.input-daterange').datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        keyboardNavigation: !1,
        forceParse: !1,
        autoclose: !0
      });
    },
    watch: {
      // result: function (val) {
      //   this.$nextTick(function () { console.info('变量result渲染完成'); }
      // }
    },
    methods: {
      page(pageIndex) {
        let that = this;
        if (!pageIndex) pageIndex = 1;
        axios.post(site.riverSupervisor.page + pageIndex
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.result = result;
            that.tagPages = that.tag.page(result.data);
          } else {
            alert(result.message);
          }
        });
      },
      info(title, item) {
        $storage.setItem(site.riverSupervisor.info, item.id);
        this.lbox.openMyBoxLayer(title, site.riverSupervisor.view + '/info');
      },
      edit(title, item) {
        $storage.setItem(site.riverSupervisor.info, item.id);
        this.lbox.openMyBoxLayer(title, site.riverSupervisor.view + '/edit');
      },
      del(item) {
        let that = this;
        if (confirm('确认删除吗?')) {
          axios.post(site.riverSupervisor.del + item.id, {}).then(function (response) {
            const result = response.data;
            if (result.code === 0) {
              that.page(that.result.data.pageIndex);
              alert('删除成功');
            } else {
              alert(result.message);
            }
          });
        }
      },
      typeEnum(type) {
        switch (type) {
          case 1:
            return `<span class="label label-info">河长</span>`;
          case 18:
            return `<span class="label label-danger">总河长</span>`;
          case 19:
            return `<span class="label label-warning">副总河长</span>`;
        }
      }
    }
  }
</script>
